前幾天在寫SignalR時遇到了一個需求，在啟動SignalR後想要點不同的按鈕去觸發不同的事件處理函數，程式碼範例如下:

$(function () {
    hub = $.connection.messageHub;

    $.connection.hub.start().done(function () {
        connId = $.connection.hub.id;
    });
    
    hub.client.getMessage = function (message) {
        console.log('default event handler');
    };
});

function btnClick1() {
    console.log('btnClick1');
    hub.client.getMessage = function (message) {
        console.log('btn1 event handler');
    };
}

function btnClick2() {
    console.log('btnClick2');
    hub.client.getMessage = function (message) {
        console.log('btn2 event handler');
    };
}

結果:

原來的事件處理函數沒有被覆寫掉，這是怎麼一回事呢?
Google後發現解答
https://stackoverflow.com/questions/16064651/the-on-event-on-the-signalr-client-hub-does-not-get-called
hub.client.getMessage這種寫法，只有在呼叫start()之前有效，在呼叫start()後想要覆寫事件處理函數，則要使用on()這個方法。

修改後程式:

$(function () {
    hub = $.connection.messageHub;

    $.connection.hub.start().done(function () {
        connId = $.connection.hub.id;
    });
    
    hub.client.getMessage = function (message) {
        console.log('default event handler');
    };
});

function btnClick1() {
    console.log('btnClick1');
    hub.on("getMessage", function (message) {
        console.log('btn1 event handler');
    });
}

結果:

新的事件有被加上去，不過舊的事件也一起被觸發，再做一些調整。

修改後程式:

$(function () {
    hub = $.connection.messageHub;

    $.connection.hub.start().done(function () {
        connId = $.connection.hub.id;
    });
    
    hub.client.getMessage = function (message) {
        console.log('default event handler');
    };
});

function btnClick1() {
    console.log('btnClick1');
    hub.off("getMessage", null);
    hub.on("getMessage", function (message) {
        console.log('btn1 event handler');
    });
}

function btnClick2() {
    console.log('btnClick2');
    hub.off("getMessage", null);
    hub.on("getMessage", function (message) {
        console.log('btn2 event handler');
    });
}

結果:

結語:
使用off()先將舊的事件清除，再用on()註冊新的事件，事件處理函數正確的被覆寫掉了。